<script setup>
// 获取数据
const props = defineProps(["shopInfo"]);
// console.log(props.shopInfo);
</script>

<template>
  <div class="shop">
    <!-- {{shopInfo.value[0].imgUrl}} -->
    <div class="shop_img"> 
      <img :src="props.shopInfo.imgUrl" alt="111" />
    </div>
    <div class="shop_content">
      <div class="shop_content_title">
        {{ props.shopInfo.name }}
      </div>
      <div class="shop_content_tags">
        <span class="shop_content_tag"> 月售: {{ props.shopInfo.sales }} </span>
        <span class="shop_content_tag">
          起送: {{ props.shopInfo.expressLimit }}
        </span>
        <span class="shop_content_tag">
          基础运费: {{ props.shopInfo.expressPrice }}
        </span>
      </div>
      <div class="shop_content_highlight">{{ props.shopInfo.slogan }}</div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
  display: flex;
  margin: 0.12rem 0;
  min-height: 0.9rem;
  border-bottom: solid 0.01rem $content_bgColor;

  &_img {
    display: flex;
    align-items: center;
    margin-right: 0.16rem;

    img {
      width: 0.56rem;
      height: 0.56rem;
    }
  }

  &_content {
    min-width: 2.67rem;
    font-family: PingFangSC-Regular;
    color: $content_fontcolor;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      line-height: 0.22rem;
      font-size: 0.16rem;
      margin-bottom: 0.08rem;
    }
    &_tags {
      font-size: 0.13rem;
      margin-bottom: 0.08rem;
    }
    &_tag {
      line-height: 0.18rem;
      margin-right: 0.16rem;
    }
    &_highlight {
      line-height: 0.18rem;
      margin-right: 0.16rem;
      color: #e93b3b;
      margin-bottom: 0.08rem;
    }
  }
}
</style>